﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<%@ Import Namespace="NetflixCatalog" %>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace=" System.Linq" %>
<script runat="server">
    [WebMethod]
    public static IEnumerable GetModels(int pageIndex, int pageSize)
    {
        NetflixCatalog catalog = new NetflixCatalog(new Uri("http://odata.netflix.com/Catalog/"));
        return catalog.Titles.Skip(pageIndex * pageSize).Take(pageSize);
    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Async pagination
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    User <span>triger('merge')</span> to buffer data and implement an async pagination
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <style type="text/css">
        #demo1 p
        {
            font-weight: bold;
            margin: 10px 0px 10px 0px;
        }
        #demo1content
        {
            padding: 10px;
            border: 3px solid #888;
        }
        
        #Container table td
        {
            padding: 8px;
        }
    </style>
    <div id="demo1content">
        <!-- The pagination will be shown here -->
        <div class="PaginationContainer">
        </div>
        <br style="clear: both;" />
        <!-- An empty div to show the actual table -->
        <div id="Container">
        </div>
        <!-- The template of the "repeater" -->
        <textarea id="template" style="display: none">
			<table>
				<tr>
					<th></th>
					<th>Name</th>
					<th>Average Rating</th>
					<th>DVD Available</th>
					<th>Modified</th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td> {$T.d.Name} </td>
					<td class="number"> 
						  {#if $T.d.AverageRating < 2} <span style="color: Red">{$T.d.AverageRating}</span> {#elseif $T.d.AverageRating
                        < 3} <span style="color: Orange">{$T.d.AverageRating}</span> {#else} {$T.d.AverageRating} {#/if}
					</td>
					<td> {$T.d.Dvd.Available ? 'Y' : 'N'} </td>
					<td> {$d.datetime.format($T.d.DateModified, "MMM/dd/yyyy")} </td>
				</tr>
				{#/for}
			</table>
		</textarea>
        <!-- template end -->
        <textarea id="template2" style="display: none">
			<table>
				<tr>
					<th></th>
					<th></th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td> {$T.d.Id} </td>
				</tr>
				{#/for}
			</table>
		</textarea>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#Container").dataBind($("#template").text(), [], {
                page_container: '.PaginationContainer',
                page_size: 15,
                //set metadata to initialize the pagination.
                metadata: { item_num: 500 },
                //handle the page changing event
                page_changing: function (e) {
                    //add your animation.
                    $("#Container").hide();
                    //if there is no data in the current page
                    if (e.items.length < e.page_index * e.page_size + 1 || e.items[e.page_index * e.page_size] == null) {
                        //suspend the page change to wait for the server call
                        $("#Container").trigger('suspend', true);
                        //call the server to get the data for the current page
                        $.doPostback("GetModels", { pageIndex: e.page_index, pageSize: e.page_size }, function (data) {
                            //merge new data with the old ones.
                            //If you don't want to buffer data, 
                            //you can use $("#Container").trigger('pagedata', [data.d]); instead
                            $("#Container").trigger('merge', [data.d, e.page_index * e.page_size]);
                            //update the page.
                            $("#Container").trigger('suspend', false);
                            //your animation code for showing the information.
                            $("#Container").slideDown(500);
                        });
                    }
                    else {
                        $("#Container").slideDown(500);
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $("#Container").dataBind($("#template").text(), [], {
                page_container: '.PaginationContainer',
                page_size: 15,
                //set metadata to initialize the pagination.
                metadata: { item_num: 500 },
                //handle the page changing event
                page_changing: function (e) {
                    //add your animation.
                    $("#Container").hide();
                    //if there is no data in the current page
                    if (e.items.length < e.page_index * e.page_size + 1 || e.items[e.page_index * e.page_size] == null) {
                        //suspend the page change to wait for the server call
                        $("#Container").trigger('suspend', true);
                        //call the server to get the data for the current page
                        $.doPostback("GetModels", { pageIndex: e.page_index, pageSize: e.page_size }, function (data) {
                            //merge new data with the old ones.
                            //If you don't want to buffer data, 
                            //you can use $("#Container").trigger('pagedata', [data.d]); instead
                            $("#Container").trigger('merge', [data.d, e.page_index * e.page_size]);
                            //update the page.
                            $("#Container").trigger('suspend', false);
                            //your animation code for showing the information.
                            $("#Container").slideDown(500);
                        });
                    }
                    else {
                        $("#Container").slideDown(500);
                    }
                }
            });
        });
</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
</asp:Content>
